<template>
	<view class="box">


		<view class="" v-if="flag==true" @click="cx">
			<view class="boss" v-for="(item ,index) in arr" :key="index" style="padding: 24rpx;"
				v-if="current==0">
				<view class="" v-if="item.collect==true" style="color: #167BFF;text-align: right;" @click="sc(item)">
					<image src="https://web.78keji.cn/cdimage/sc.png" mode="widthFix" style="width: 25rpx;"></image> 已收藏
				</view>
				<view class="" v-else style="color: #8B97A6;text-align: right;" @click="sc(item)">
					<image src="https://web.78keji.cn/cdimage/scno.png" mode="widthFix" style="width: 25rpx;"></image>收藏
				</view>
				<view class="namess">
					{{item.name}}
				</view>
				<view class="d_f j_c_s_b">
					<view class="local">
						{{item.local}}
					</view>
					<!-- <view class="imgs">
						{{item.distance}}
					</view> -->
				</view>
				<view class="d_f">
					<view class="local d_f a_i_c" style="color: #167BFF;">
						<image src="https://web.78keji.cn/cdimage/cz.png" mode="widthFix" style="width: 40rpx;"></image>
						<view class="" style="margin-left: 22rpx;">
							{{item.num}}个插座可用
						</view>
					</view>
					<view class="local" style="margin-left: 30rpx;">
						共{{item.allnum}}个插座
					</view>
				</view>

			</view>
		</view>
		<view class="" v-if="flag==false">
		<view class="" v-if="current==0">
			<view class="d_f j_c_c " style="padding-top: 340rpx;">
				<image src="https://web.78keji.cn/cdimage/nozd.png" mode="widthFix" style="width:308rpx;">
				</image>
			</view>
			<view class="d_f j_c_c " style="color: #999999;margin-top: 10rpx;">
				暂无充电站点信息
			</view>
		</view>
		</view>
		<view class="" v-if="current==1">
			<u-popup v-model="show" mode="center" height="488rpx" width="90%">
				<view class="popup">
					<u-field v-model="mobile" placeholder="请输入缴费手机号" type="number">
					</u-field>
					<u-field placeholder="输入验证码" v-model="sms" type="number">
						<template v-slot:right>
							<view class="">
								<button size="mini" type="primary" :disabled="disabled"
									@tap='getCode'>{{getCodeText}}</button>
								<!-- <button :disabled="disabled" class="getCode" :style="{'color':getCodeBtnColor}" @click.stop="getCode()">
								</button> -->
							</view>

						</template>
					</u-field>
					<button type="primary" class="m_t_18" @tap="login">登录</button>
				</view>
			</u-popup>
			<view class="second">
				<view class="d_f a_i_c" @click="show=true" v-if="flag==false">
					<view class="" style="margin-top: 24rpx;">
						<image src="https://web.78keji.cn/cdimage/nologin.png" mode="widthFix" style="width:122rpx;">
						</image>
					</view>
					<view class="" style="margin-left: 24rpx;">
						<view class="" style="font-size: 46rpx;color: white;">
							请登录
						</view>
						<view class="" style="font-size: 26rpx;color: white;">
							绿色环保，助你平安出行~
						</view>
					</view>
				</view>
				<view class="d_f a_i_c" v-else>
					<view class="" style="margin-top: 24rpx;">
						<image src="https://web.78keji.cn/cdimage/login.png" mode="widthFix" style="width:122rpx;">
						</image>
					</view>
					<view class="" style="margin-left: 24rpx;">
						<view class="" style="font-size: 46rpx;color: white;">
							{{phone}}
						</view>
						<view class="" style="font-size: 26rpx;color: white;">
							绿色环保，助你平安出行~
						</view>
					</view>
				</view>
				<view class="bg1" style="margin-top: 24rpx;padding-top: 41rpx;color: #1C2D7A;" @click="yh" v-if="flag==true">
					<view class="d_f j_c_c" style="font-weight: 800;font-size: 46rpx;">
						优惠券
					</view>
					
				</view>


			</view>
			<view class="th">
				<view class="" style="color: #333333;font-size: 31rpx;font-weight: bold;">
					常用工具
				</view>
				<view class="columnx">
					<view class=" d_f f_d_c a_i_c" v-for="(item,index) in lists" :key='index' @tap="jump(item.name)">
						<image :src=item.img mode="widthFix" :style="item.width"></image>
						<view :class="index==1?'imagex':'images'">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<u-tabbar v-model="current" :list="list"  @change='changes'></u-tabbar>
	</view>
</template>

<script>
	import {

		sendSms,
		loginx,
	

	} from '../../api/index.js'
	export default {
		data() {
			return {
				money:'',
				flag: false,
				getCodeText: '获取验证码',
				getCodeBtnColor: "#ffffff",
				getCodeisWaiting: false,
				disabled: false,
				mobile: "",
				sms: '',
				show: false,
				lists: [{
						name: '我的订单',
						img: 'https://web.78keji.cn/cdimage/oderx.png',
						width: "width: 38rpx;"
					},
					{
						name: '收藏站点',
						img: 'https://web.78keji.cn/cdimage/shoucang.png',
						width: "width: 42rpx;"
					},

					{
						name: '联系客服',
						img: 'https://web.78keji.cn/cdimage/kefu.png',
						width: "width: 40rpx;"
					},






				],
				list: [{
						iconPath: "https://web.78keji.cn/images/tcxcx/sy2.png",
						selectedIconPath: "https://web.78keji.cn/images/tcxcx/sy1.png",
						text: '首页',

						isDot: false,
						customIcon: false,
					},

			

					{
						iconPath: "https://web.78keji.cn/images/tcxcx/my2.png",
						selectedIconPath: "https://web.78keji.cn/images/tcxcx/my1.png",
						text: '我的',

						isDot: false,
						customIcon: false,
					},
				],
				current: 0,
				phone: "",
				arrx:[],
				arr: [
					{
						name: "府河路",
						local: "四川省成都市双流区华阳街道华文苑",
						num: 5,
						allnum: 10,
						distance: "15km",
						collect: true

					}
				]
			}
		},
		components: {

		},
		methods: {
			yh(){
				uni.navigateTo({
					url:'/pages/cate/cate'
				})
			},
			cx(){
				uni.navigateTo({
					url:'/pages/order/order'
				})
			},
			sc(item) {
				console.log(item)
				item.collect = !item.collect
			uni.setStorageSync('arrs', this.arr)
			
			},
			login() {

				loginx({
					mobile: this.mobile,

					type: 3,
					captcha: this.sms
				}).then((res) => {
					console.log(res)
					if (res.code == 1) {
						this.flag = true
						this.show = false

						uni.setStorageSync('openid', res.data.openid)
						uni.setStorageSync('mobile', res.data.mobile)
						this.phone = res.data.mobile

					}
				})

			},
			getCode() {

				sendSms({
					mobile: this.mobile,

				}).then((res) => {
					this.disabled = true
					this.getCodeText = "发送中..." //发送验证码
					this.getCodeisWaiting = true;
					setTimeout(() => {
						//this.$common.msg('验证码已发送')
						uni.showToast({
							title: '验证码已发送',
							icon: "none"
						}); //弹出提示框
						this.setTimer(); //调用定时器方法
					}, 1000)
				})
				//示例用定时器模拟请求效果
				//setTimeout(()用于在指定的毫秒数后调用函数或计算表达式

			},
			setTimer() {
				let holdTime = 60; //定义变量并赋值
				this.getCodeText = "重新获取(60)"
				//setInterval（）是一个实现定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。
				//setInterval方法会不停地调用函数，直到 clearInterval被调用或窗口被关闭。
				this.Timer = setInterval(() => {
					if (holdTime <= 0) {
						this.disabled = false
						this.getCodeisWaiting = false;
						this.getCodeBtnColor = "#ffffff";
						this.getCodeText = "获取验证码"
						clearInterval(this.Timer); //清除该函数
						return; //返回前面
					}
					this.getCodeText = "重新获取(" + holdTime + ")"
					holdTime--;
				}, 1000)
			},
			changes(e) {
				console.log(e)
			
			},
			jump(e) {
				console.log(e)
				if (e == '联系客服') {
					uni.makePhoneCall({
						phoneNumber: "4008825010", //电话号码
						success(ress) {
							console.log("拨打电话成功", ress)
						},
						fail(err) {
							console.log("拨打电话失败", 'err')
						}

					})
				} else if (e == '收藏站点') {
					if (this.flag == true) {
						
uni.navigateTo({
	url:'/pages/my/my'
})
					} else {
						uni.showToast({
							title: '请先登录',
							icon: "none"
						}); //弹出提示框
					}
				} else {
uni.navigateTo({
	url:'/pages/order/order'
})
				}
			}
		},
		onShow() {
			if (uni.getStorageSync('money')) {
				this.money = uni.getStorageSync('money')
				
			}else{
				this.money = 200
				uni.setStorageSync('money', this.money)
			}
		},
		onLoad() {
			
			if (uni.getStorageSync('openid')) {
				this.flag = true
				this.phone = uni.getStorageSync('mobile')
			}
			if (uni.getStorageSync('arrs')) {
				this.arr=uni.getStorageSync('arrs')
				
				console.log(this.arr)
			}
		
			

		},
		watch: {

		},
		computed: {

		}
	}
</script>

<style scoped>
	.popup {
		padding: 42rpx 42rpx 20rpx 42rpx;
		background: white;
	}

	.name {
		color: #1A1A1A;
		font-weight: bold;
		font-size: 32rpx;
	}

	.namess {
		color: #1A1A1A;
		font-weight: bold;
		font-size: 32rpx;
	}

	.local {
		margin-top: 24rpx;
		color: #676767;

		height: 25rpx;

		font-size: 26rpx;
		color: #676767;
		line-height: 26rpx;
	}

	.imgs {
		width: 168rpx;
		height: 50rpx;

		border-radius: 25rpx;
		background-image: url('https://web.78keji.cn/cdimage/local.png');
		background-size: 100% 100%;
		padding-left: 69rpx;
		padding-top: 7rpx;
		margin-top: 16rpx;
	}
	.bg1{
		background-image: url('https://web.78keji.cn/cdimage/bg1.png');
			background-size: 100% 100%;
		width:702rpx;
		height: 130rpx;
	}

	.box {
		position: relative;
		min-height: 100vh;
		min-width: 100%;
		background-color: #F5F5F5;



	}

	.boss {
		width: 702rpx;
		height: 240rpx;
		background: #FFFFFF;
		border-radius: 17rpx;
		margin-top: 24rpx;
		margin-left: 24rpx;
	}

	.second {
		width: 750rpx;
		height: 476rpx;
		background-image: url('https://web.78keji.cn/cdimage/bg.png');
		background-size: 100% 100%;
		padding: 24rpx;

	}

	.th {
		width: 702rpx;
		height: 246rpx;
		background: #FFFFFF;
		border-radius: 12rpx;
		margin-top: -120rpx;
		margin-left: 24rpx;
		padding: 31rpx;
	}

	.columnx {
		padding: 0 22rpx 0 22rpx;
		margin-top: 26rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

	}

	.name {
		margin-top: 22rpx;
		font-size: 25rpx;
		color: #FFFFFF;
	}

	.imagex {
		margin-top: 16rpx;
	}

	.images {
		margin-top: 13rpx;
	}
</style>